从 Figma 到 Lovable
直接将 Figma 设计导出到 Lovable。
现在，您可以使用 Builder.io 的原生集成，直接将 Figma 设计导出到 Lovable。不需要开发人员参与。本指南将指导您如何组织设计、导出设计，并将其转化为一个全栈应用——一切都在一个顺畅的流程中完成。
为什么这个集成会带来变革
设计师不再仅停留在原型制作阶段。
借助 Builder.io，您可以将 Figma 设计转化为干净、结构化的代码。
借助 Lovable，您可以将这些代码转化为功能齐全的全栈应用——全部通过 AI 实现。
Figma ➜ Builder.io ➜ Lovable ➜ App
逐步指南：从 Figma 到全栈应用
1. 组织您的 Figma 设计
为了顺利导出，您的 Figma 文件需要保持井然有序。以下是准备方法：
使用自动布局（精确模式所必需）
- 为所有父容器应用自动布局。
- 使用正确的填充、间距和调整大小规则。
- 设置水平/垂直调整大小，以实现响应式布局。
清晰命名图层
- 使用像
Header、CTA Button、Nav Bar这样的名称，而不是Frame 23。 - 避免使用符号和嵌套杂乱。
- 逻辑地对类似组件进行分组。
构建可重用组件
- 使用一致的样式（字体、颜色等）。
- 将重复元素转化为Figma 组件。
基于设计系统思考
- 应用全局样式。
- 如果可用，使用共享组件库。
专业提示： Builder.io 支持两种导出模式：
- 简单模式： 快速导出，保真度较低。
- 精确模式： 需要结构化设置，但能提供像素级完美的结果。
2. 在 Figma 中打开 Builder.io 插件
1. 安装并启动插件
- 打开您的 Figma 文件。
- 转到
Plugins > Builder.io。 - 选择您要导出的框架。
2. 选择模式
- 简单模式： 最快的测试布局方式。
- 精确模式： 适合精致的响应式设计。
3. 映射组件（可选）
如果提示，映射检测到的组件，以确保更顺畅的导出。
4. 导出您的设计
- 点击**“在 Lovable 中打开”**。
- 您的 Figma 设计现在已成为 Lovable 中的可操作 UI。
3. 在 Lovable 中迭代
这就是魔力发生的地方——将静态设计转化为真实、可用的应用。
1. 使用 AI 提示进行改进
在 Lovable 中，您可以：
- 更改布局
- 添加部分
- 微调样式
- 进行响应式调整
只需描述您想要的内容。Lovable 会处理其余部分。
2. 实时预览
- 使用**“启动预览”**功能即时查看更新。
- 在部署前测试您的更改。
3. 添加后端逻辑
需要数据库或身份验证？
- 通过 Lovable 的集成连接 Supabase 或其他服务。
4. 准备好就部署
- 一键将您的应用上线。
- 与团队或用户分享。
- 根据反馈进行迭代。
4. 上线啦 🎉！接下来做什么？
恭喜您——您刚刚从 Figma 文件中构建了一个可运行的应用，而无需编写代码。
以下是您接下来可以做的：
资源
有反馈吗？
我们正在为您打造这个功能。标记我们、发私信，或分享您的体验——我们一直在倾听。